import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Statistic, Table, Tag, Spin } from 'antd';
import { UserOutlined, FileTextOutlined, CheckCircleOutlined, CloseCircleOutlined, MinusCircleOutlined, DeleteOutlined } from '@ant-design/icons';
import api, { DashboardStats } from '../../services/api';

// 定义游记类型
interface RecentTravel {
  id: string;
  title: string;
  author: string;
  submitTime: string;
  status: string;
}

// 定义统计数据类型
interface StatisticsData {
  totalUsers: number;
  totalTravels: number;
  pendingReviews: number;
  approvedTravels: number;
}

const Dashboard: React.FC = () => {
  const [statistics, setStatistics] = useState<StatisticsData>({
    totalUsers: 0,
    totalTravels: 0,
    pendingReviews: 0,
    approvedTravels: 0,
  });
  const [recentTravels, setRecentTravels] = useState<RecentTravel[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  // 获取仪表盘数据
  useEffect(() => {
    const fetchDashboardData = async () => {
      setLoading(true);
      try {
        const dashboardData = await api.getDashboardStats();
        setStatistics(dashboardData.statistics);
        setRecentTravels(dashboardData.recentTravels);
      } catch (error) {
        console.error('获取仪表盘数据失败:', error);
        // 错误处理
      } finally {
        setLoading(false);
      }
    };

    fetchDashboardData();
  }, []);

  const columns = [
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      ellipsis: true,
    },
    {
      title: '作者',
      dataIndex: 'author',
      key: 'author',
    },
    {
      title: '提交时间',
      dataIndex: 'submitTime',
      key: 'submitTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => {
        let color = '';
        let text = '';
        let icon = null;

        switch (status) {
          case 'pending':
            color = 'gold';
            text = '待审核';
            break;
          case 'approved':
            color = 'green';
            text = '已通过';
            icon = <CheckCircleOutlined />;
            break;
          case 'rejected':
            color = 'red';
            text = '已拒绝';
            icon = <CloseCircleOutlined />;
            break;
          case 'deleted':
            color = 'grey';
            text = '已删除';
            icon = <DeleteOutlined />;
            break;
          default:
            color = 'default';
            text = '未知';
        }

        return (
          <Tag color={color} icon={icon}>
            {text}
          </Tag>
        );
      },
    },
  ];

  if (loading) {
    return (
      <div style={{ textAlign: 'center', padding: '100px 0' }}>
        <Spin size="large" />
      </div>
    );
  }

  return (
    <div style={{ padding: '0 10px' }}>
      <h2 style={{ margin: '24px 0', fontSize: '20px', fontWeight: 'bold' }}>系统概览</h2>

      <Row gutter={24} style={{ marginBottom: 24 }}>
        <Col span={6}>
          <Card hoverable>
            <Statistic
              title="注册用户"
              value={statistics.totalUsers}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card hoverable>
            <Statistic
              title="游记总数"
              value={statistics.totalTravels}
              prefix={<FileTextOutlined />}
              valueStyle={{ color: '#52c41a' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card hoverable>
            <Statistic
              title="待审核"
              value={statistics.pendingReviews}
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card hoverable>
            <Statistic
              title="已通过"
              value={statistics.approvedTravels}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
      </Row>

      <Card
        title="最近游记"
        className="dashboard-card"
        bordered
      >
        <Table
          columns={columns}
          dataSource={recentTravels}
          rowKey="id"
          pagination={false}
        />
      </Card>

      {/* 添加样式 */}
      <style dangerouslySetInnerHTML={{
        __html: `
          .ant-card {
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            border-radius: 8px;
          }
          .ant-statistic-title {
            font-size: 16px;
            margin-bottom: 8px;
          }
          .ant-table-thead > tr > th {
            background-color: #f0f2f5;
            font-weight: bold;
          }
          .dashboard-card {
            border-radius: 8px;
            margin-bottom: 24px;
          }
          .ant-card-head {
            border-bottom: 1px solid #f0f0f0;
            padding: 0 16px;
          }
        `
      }} />
    </div>
  );
};

export default Dashboard;